// 导入React
import React from "react";

/**
 * 目标：了解有状态组件产生的原因
 * 利用我们刚刚学习的函数组件和类组件模拟有状态的过程
 */

// 类组件
class Timer extends React.Component {
  // 类方法 render() 返回JSX结构
  render() {
    return (
      <div>
        <h1>大家好，我是一个类组件，当前时间是：</h1>
        <h2>{new Date().toLocaleTimeString()}</h2>
      </div>
    );
  }
}
// 导出组件
export default Timer;
// -------------------------------------
// 函数组件
function Timer () {
  // 函数返回JSX结构
    return (
      <div>
        <h1>大家好，我是一个函数组件，当前时间是：</h1>
        <h2>{new Date().toLocaleTimeString()}</h2>
      </div>
    );

}
// 导出组件
export default Timer;

// ---------------------------
setInterval(
  () => {
      ReactDOM.render(<App />, document.getElementById("root"));

  }, 1000
)
